<template>
  <div class="yx-bg">
    <div id="top-panel">
      <img id="denglong" style="width: 15%;" src="/static/img/denglong.png">
      <img style="width: 25%; margin-top: -3rem;" src="/static/img/wuyuan_logo.png">
      <img id="meihua" style="width: 60%; float: right; margin-right: -15%;" src="/static/img/meihua.png">
    </div>
    <!-- <div style="height: 8rem;">&nbsp;</div> -->
    <div id="title-panel">
      <img id="title-wenzi" src="/static/img/nyx.png">
      <img id="title-yuanxiao" src="/static/img/yuanxiao.png">
      <img id="title-xiangqi" src="/static/img/xiangqi.png">
    </div>

    <div style="text-align: center;">
      <span class="start-btn" style="font-size: 3rem; font-weight: bold; border: 3px dashed red; border-radius: 15px; padding: 8px 15px" @click="startGame">开始猜灯谜</span>
    </div>

    <div style="text-align: center; margin-top: 2rem;">
      <span class="start-btn" style="font-size: 3rem; font-weight: bold; border: 3px dashed red; border-radius: 15px; padding: 8px 15px;" @click="showRanking">查看排行榜</span>
    </div>
    <div style="text-align: center; font-size: 1.7rem; margin-top: 15px; z-index: 500" @click="checkRule">点击查看<span style="color: red; font-weight: bold;">规则介绍</span></div>
    <div style="text-align: center; font-size: 1.7rem; margin-top: 5px; z-index: 500" @click="checkUser">点击查看<span style="color: red; font-weight: bold;">我的战绩</span></div>

    <!-- <div style="font-size: 3rem" @click="checkUser">用户中心</div> -->

    <div id="footer-panel">
      <img src="/static/img/logo.png" style="width: 20%;">
      <span style="font-size: 1.3rem; font-weight: 600;">六六电竞提供技术支持</span>
      <div style="height: 2rem"></div>
    </div>
    <!-- <div id="footer-panel">
      <div style="position: relative;">
        <img id="mudan2" style="width: 30%; position: absolute; right: 0; bottom: 0; z-index: 100" src="/static/img/mudan2.png">
        <img id="mudan1" style="width: 30%; position: absolute; right: 23%; bottom: -10%; z-index: 101" src="/static/img/mudan1.png">
        <img id="footer-chengqiang" src="/static/img/chengqiang.png">
      </div>
    </div> -->
    
  </div>
</template>

<script>

import wx from 'weixin-js-sdk'

export default {
  data () {
    return {
      
    }
  },
  mounted: function() {
    console.log(localStorage.getItem('openid'))
    if (!localStorage.getItem('openid') || localStorage.getItem('openid') == "undefined") {
      this.wxLogin()
    } else {
      this.saveUserInfo(localStorage.getItem('openid'), localStorage.getItem('nick_name'), localStorage.getItem('head_img_url'))
    }

    this.getSignPackage()

    let animation = new TimelineLite()
    animation
      .from("#title-wenzi", 1, {
        scale: 0,
      })
      .from("#title-yuanxiao", 0.5, {
        opacity: 0,
      })
      .from("#title-xiangqi", 1, {
        opacity: 0,
        y: "+200"
      })

    TweenLite.from("#denglong", 1, {
      y: "-400",
      opacity: 0,
    })

    TweenLite.from("#meihua", 1, {
      x: "+400",
      opacity: 0,
    })

    // TweenLite.from("#footer-chengqiang", 2, {
    //   y: "+400",
    //   opacity: 0,
    // })

    // TweenLite.from("#mudan1", 1.3, {
    //   y: "+400",
    //   opacity: 0,
    // })

    // TweenLite.from("#mudan2", 1, {
    //   y: "+400",
    //   opacity: 0,
    // })
  	
  },
  methods: {

    startGame: function() {
      this.$router.push({path: 'question'})
    },

    showRanking: function() {
      this.$router.push({path: 'end'})
    },

    saveUserInfo: function(openid, nickName, headImgUrl) {
      // console.log(openid)
      // console.log(nickName)
      // console.log(headImgUrl)
      this.$axios.get(`/getYuanXiaoUserInfo.php?openid=${openid}&nick_name=${nickName}&head_img=${headImgUrl}`)
      .then(res => {
        console.log(res.data)
        localStorage.setItem('user_id', res.data.id)
        localStorage.setItem('openid', res.data.openid)
        localStorage.setItem('nick_name', res.data.nick_name)
        localStorage.setItem('head_img_url', res.data.head_img_url)
        localStorage.setItem('answer_correct_num', res.data.answer_correct_num)
      })
    },

    wxLogin: function() {
      let currentUrl = window.location.href
      let urlArr = currentUrl.split("#")
      let redirectUrl = encodeURIComponent(urlArr[0])

      let appid = 'wx7e8740ce00bac5b0'

      let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect`
      let code = this.getUrlParam("code")

      let that = this
      if (!code) {
        window.location = url
      } else {
        this.$axios.get(`wxGetUserInfo.php?code=${code}`)
          .then(res => {
            console.log(res.data)
            that.getWxUserInfo(res.data.access_token, res.data.openid)
          })
      }
    },

    getUrlParam: function(key) {
      var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },

    getWxUserInfo: function(accessToken, openid) {
      let that = this
      this.$axios.get(`/sns/userinfo?access_token=${accessToken}&openid=${openid}&lang=zh_CN`)
        .then(res => {
          console.log(res.data)
          // console.log(res.data.openid)
          // console.log(res.data.nickname)
          // console.log(res.data.headimgurl)

          let tempOpenId = res.data.openid
          let tempNickname = res.data.nickname
          let tempHeadImgUrl = res.data.headimgurl

          that.saveUserInfo(tempOpenId, tempNickname, tempHeadImgUrl)

        })
    },

    getSignPackage: function() {
      let currentUrl = window.location.href
      let urlArr = currentUrl.split("#")
      let url = encodeURIComponent(urlArr[0])
      this.$axios.get(`getAccess.php?url=${url}`)
        .then(res => {
          this.setWxConfig(res.data)
        })
    },

    setWxConfig: function(data) {
      wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: data.appId, // 必填，公众号的唯一标识
          timestamp: data.timestamp, // 必填，生成签名的时间戳
          nonceStr: data.nonceStr, // 必填，生成签名的随机串
          signature: data.signature,// 必填，签名
          jsApiList: [
            'onMenuShareTimeline',
            // 'updateAppMessageShareData',
            'onMenuShareAppMessage'
          ] // 必填，需要使用的JS接口列表
      })

      wx.ready(function() {
        console.log('接口配置信息已经完成')
        
        wx.onMenuShareTimeline({
          title: `快来一起闹元宵，猜灯谜，赢大奖！`,
          link: 'http://www.66nmgame.com/yuanxiao.html',
          imgUrl: 'http://www.66nmgame.com/static/img/share.png',
          success: function() {
            console.log('用户点击按钮回调')
            // hideShareTemp()
          }
        })

        wx.onMenuShareAppMessage({
          title: "猜灯谜，赢大奖",
          desc: "快来一起闹元宵，猜灯谜，赢大奖！",
          link: 'http://www.66nmgame.com/yuanxiao.html',
          imgUrl: 'http://www.66nmgame.com/static/img/share.png',
          success: function() {
            console.log("分享给朋友设置成功!")
          }
        })
      })

    },


    checkRule: function() {
      this.$router.push({path: 'rule'})
    },


    checkUser: function() {
      this.$router.push({path: 'user'})
    }



  }
}
</script>

